import React, { Component } from 'react'
import { Toast } from 'antd-mobile'
import { NavBar, Icon, Item, Button } from 'components'
import { post, msg, showPhone } from '../../../utils'

export default class ServiceListApproval extends Component<any, any> {

    public state: any = {
        data: {}
    }

    public render(): JSX.Element {
        const data: any = { ...this.state.data }
        return (
            <div className="serviceListApproval">
                <NavBar
                    fixed={true}
                    title={<div className="returnpolicy_NavTitle">服务单详情</div>}
                />
                <div className="serviceListApproval_provideInfo serviceListApproval_pd">
                    本次售后服务由<span>{data.seller_name && data.seller_name.name}</span>为您提供
                </div>
                <div className="serviceListApproval_status">
                    <img src={require('../../../assets/ServiceListApproval_bg.png')} />
                    <div className="serviceListApproval_pd">
                        <div className="serviceListApproval_status_title">
                            <Icon type="orderApprove" />
                            <span>{this.getStatusLabel(data.status)}</span>
                        </div>
                        <div className="serviceListApproval_status_text">{this.getLabel()}</div>
                        {/* <div className="serviceListApproval_status_time">还剩47小时59分钟50秒</div> */}
                    </div>
                </div>
                <div className="serviceListApproval_orderInfo">
                    <p>服务单号：<span>{data.refund_no}</span> </p>
                    <p>申请时间：<span>{data.create_time}</span> </p>
                </div>
                <div className="serviceListApproval_processInfo">
                    <Item
                        className="serviceListApproval_processInfo_Item"
                        title={<div className="serviceListApproval_processInfo_title">售后进度</div>}
                        value={<div className="serviceListApproval_processInfo_value" onClick={() => { this.goToUrl('/My/customerServiceProcess') }}>进度详情</div>}
                    />
                    <div className="serviceListApproval_processInfo_img">
                        <div className="serviceListApproval_processInfo_content">
                            <div>
                                <Icon type="complete" />
                                <p style={{ fontSize: '0.6rem', color: '#fa0000' }}>提交申请</p>
                            </div>
                            <div>
                                <div>
                                    <span>
                                        <span><span>{this.getStatusPro(data.status)}</span></span>
                                        <Icon type="tick" />
                                    </span>

                                </div>
                            </div>
                            <div>
                                <Icon type="complete" />
                                <p style={{ fontSize: '0.6rem', color: '#aaa' }}>第三方卖家审核</p>
                            </div>
                        </div>
                    </div>
                    <div className="serviceListApproval_processInfo_text">
                        您的服务单已申请成功，待售后审核中
                    </div>
                </div>
                <div className="serviceListApproval_problemDesc">
                    <Item className="serviceListApproval_processInfo_Item" title={<div className="serviceListApproval_processInfo_title">问题描述</div>} value={<div className="serviceListApproval_processInfo_value">补充描述</div>} />
                    <div className="serviceListApproval_orderInfo" style={{ marginTop: '0' }}>
                        <p style={{ color: '#666' }}>七天无理由退货</p>
                        <p style={{ color: '#999' }}>2018-08-06 15:10:20</p>
                    </div>
                </div>
                <div className="serviceListApproval_listDetail">
                    <Item className="serviceListApproval_processInfo_Item" title={<div className="serviceListApproval_processInfo_title">服务单信息</div>} />
                    <p><span>服务类型：</span><span>{this.getTypeLable()}</span></p>
                    <p><span>退款方式：</span><span>原返</span></p>
                    <p><span>申请原因：</span><span>{data.reason}</span></p>
                    <p><span>商品退回：</span><span>快递至第三方</span></p>
                    <p><span>联系人：</span><span>{data.shop_user_info && data.shop_user_info.real_name}</span></p>
                    <p><span>联系电话：</span><span className="DINPro">{showPhone((data.shop_user_info && data.shop_user_info.phone) || '')}</span></p>
                </div>
                <div className="serviceListApproval_operationWrap">
                    <div className="serviceListApproval_operation">
                        <Button className="serviceListApproval_operation_edit serviceListApproval_operation_btn">修改申请</Button>
                        {data.status !== 3 && <Button className="serviceListApproval_operation_cancel serviceListApproval_operation_btn" onClick={this.handleCancal}>取消申请</Button>}
                    </div>
                </div>
            </div>
        )
    }

    public componentDidMount() {
        this.getData()
    }

    private getStatusLabel(status: number) {
        switch (status) {
            case 0: return '未审核'
            case 1: return '请您发货'
            case 2: return '第三方收货'
            case 3: return '已取消'
            case 4: return '已关闭'
            case 5: return '已完成'
            default: return ''
        }
    }

    private getTypeLable = () => {
        const { data } = this.state
        switch (data.type) {
            case 1: return '退货'
            case 2: return '换货'
            default: return ''
        }
    }
    private getStatusPro(status: number) {
        switch (status) {
            case 0: return '待审核'
            case 1: return '待发货'
            case 2: return '第三方收货'
            case 3: return '已取消'
            case 4: return '已关闭'
            case 5: return '已完成'
            default: return ''
        }
    }

    private getData() {
        const { userInfo, match } = this.props
        Toast.loading('', 0)
        post('orderapi/orderRefundDetail', {
            userId: userInfo.id,
            id: match.params.id
        }).then((data: any) => {
            setTimeout(
                () => {
                    Toast.hide()
                    this.setState({
                        data
                    })
                },
                1000
            )
        })
    }

    private goToUrl = (url: string) => {
        this.props.history.push(url)
    }

    private getLabel = () => {
        const data: any = { ...this.state.data }
        switch (data.status) {
            case 3: return '您的服务订单已取消'
            default: return '您的服务订单已申请成功，待卖家审核中'
        }
    }

    private handleCancal = () => {
        const { userInfo, match } = this.props
        msg('确定要取消申请？').then(() => {
            post('orderapi/orderRefundCancal', {
                userId: userInfo.id,
                id: match.params.id
            }).then(() => {
                const data: any = { ...this.state.data }
                data.status = 3
                this.setState({
                    data
                })
            })
        })
    }
}